import {useState} from 'react'
import './index.scss'


const Header = (props) => {
    const [value, setValue] = useState('')
    const handleKeyUp = () => {
        if (value === '') {
            alert('输入不能为空')
            return
        }
        const id = new Date().getTime()
        const todoObj = {id: id, name: value, done: false}
        props.addTodo(todoObj)
        setValue('')
    }

    const inputChange = (events) => {
        const {target} = events
        setValue(target.value)
    }

    return (
        <div className='todo-header'>
            <input value={value} onChange={inputChange} type="text"
                   placeholder='请输入不得任务名称，按回车确认'/>
            <button onClick={handleKeyUp}>添加</button>
        </div>
    )
}
export default Header